{% extends 'weatherweb/layout/base_layui.html' %}

<!-- 添加当前页面的标题 -->
{% block title %}
    城市URL管理
{% endblock %}

<!-- 添加当前页面的CSS-->
{% block css %}
{% endblock %}

<!-- 添加当前页面面包屑导航的名称 -->
{% block breadcrumb %}
    城市URL
{% endblock %}

<!-- 添加当前页面的内容 -->
{% block content %}
    <!-- 内容02：查询表单部分 -->
    <div class="queryArea" style="margin-top: 25px">
        <form class="layui-form">
            {% csrf_token %}
            <div class="layui-form-item">
                <div class="layui-inline" style="width:30%">
                    <label class="layui-form-label" for="queryStr"><b>输入条件：</b></label>
                    <div class="layui-input-block">
                        <input type="text" id="queryStr" name="queryStr" class="layui-input">
                    </div>
                </div>
                <!-- 只显示地级市的复选框 -->
                <div class="layui-inline">

                    <input type="checkbox" id="QueryonlyCity" name="QueryonlyCity" title="只显示地级市" checked>

                </div>


                <div class="layui-inline">
                    <button type="button" id="btnQuery" class="layui-btn">
                        <i class="layui-icon layui-icon-search"></i> 查询
                    </button>
                    <button type="button" id="btnAll" class="layui-btn">
                        <i class="layui-icon layui-icon-list"></i> 全部
                    </button>
                    <button type="button" id="btnAdd" class="layui-btn">
                        <i class="layui-icon layui-icon-add-circle"></i> 添加
                    </button>
                </div>
            </div>

        </form>
    </div>

    <!-- 内容3：表格部分 -->
    <table class="layui-hide" id="tableArea" lay-filter="tableDemo"></table>

    <!-- 内容04：表格中的编辑和删除的按钮 -->
    <script type="text/html" id="tableBtn">
        <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i> 编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>
            删除</a>
    </script>

    <!-- 内容05：弹出层的表单 -->
    <div id="layerContent" style="display: none;padding: 30px 40px 0 0;">
        <form class="layui-form" id="layerForm">
            {% csrf_token %}
            <div class="layui-form-item" style="display: none">
                <label class="layui-form-label" for="url_id">编号：</label>
                <div class="layui-input-block">
                    <input type="text" name="url_id" id="url_id" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="province">省份：</label>
                <div class="layui-input-block">
                    <input type="text" name="province" id="province" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="city">城市：</label>
                <div class="layui-input-block">
                    <input type="text" name="city" id="city" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="area">区县：</label>
                <div class="layui-input-block">
                    <input type="text" name="area" id="area" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="url">URL：</label>
                <div class="layui-input-block">
                    <input type="text" name="url" id="url" class="layui-input">
                </div>
            </div>
        </form>
    </div>

{% endblock %}

<!-- 添加当前页面的JS -->
{% block js %}
    <script>
        // 定义全局变量
        var Operation = 0;  // 1 -- 添加 ， 2 --- 修改

        // 入口函数
        $(function () {
            // 初始化表格
            initTable();
            // 初始化layui表单
            initLayuiForm();
            // 响应各种按钮点击事件
            buttonClick();

        });

        // ============初始化Layui表单=====
        function initLayuiForm() {
            layui.use('form', function () {
                let form = layui.form;
                form.render();
            })
        }

        // ============初始化表格==========
        function initTable(isSelect = "true") {
            layui.use('table', function () {
                //实例化一个table对象
                let table = layui.table;

                // ==== 渲染表格 ====
                table.render({
                    elem: '#tableArea'
                    , url: "{% url 'weather_list_city_url' %}"  //请求后端数据的url
                    , method: 'post'
                    , where: {
                        'queryStr': $('#queryStr').val(),
                        'citySelected': isSelect,
                        'csrfmiddlewaretoken': "{{ csrf_token }}"
                    }
                    , cols:
                        [[
                            {type: 'numbers', width: 80, title: '序号', align: 'center'}
                            , {field: 'province', width: 220, title: '省份、直辖市、自治区', align: 'center'}
                            , {field: 'city', width: 180, title: '城市', align: 'center'}
                            , {field: 'area', width: 180, title: '区、县', align: 'center'}
                            , {field: 'url', title: 'URL', align: 'center'}
                            , {'title': '操作', fixed: 'right', width: '15%', align: 'center', toolbar: '#tableBtn'}
                        ]]
                    , page: true  //是否启用分页
                    , limit: 12   // 默认每页多少条记录
                    , limits: [12, 15, 20, 25, 30,]  // 用户可以选择每页的行数的下拉框
                    , done: function (res, curr, count) {
                        // 表格加载完成后自动执行的函数
                        $('thead tr').css({'background-color': '#009688', 'color': 'white'})

                    }
                });

                // ==== 监听表格的操作===
                // 回调函数中的obj就是当前操作一行数据
                table.on('tool(tableDemo)', function (obj) {
                    // 获取当前操作行的数据
                    var data = obj.data;
                    if (obj.event === 'edit') {
                        // 修改按钮响应
                        Operation = 2;
                        loadLayer(data);
                    } else if (obj.event === 'del') {
                        // 删除按钮的响应
                        delCommitDB(data)
                    }
                });

            })
        }

        // ============响应按钮点击=========
        function buttonClick() {
            //=== 查询===
            $('#btnQuery').on('click', function () {
                //判断是否选中只显示地级市
                let result = $('#QueryonlyCity').next().hasClass('layui-form-checked');
                initTable(result);
            });

            //===显示全部===
            $('#btnAll').on('click', function () {
                location.reload();
            });

            //=== 响应添加按钮===
            $('#btnAdd').on('click', function () {
                // 修改Operator
                Operation = 1;
                loadLayer();
            })
        }

        // ===========展示弹出层 =======
        function loadLayer(value = "") {
            let titleStr = "数据";
            // 判断
            if (Operation === 1) {
                titleStr = "添加" + titleStr;
            } else if (Operation === 2) {
                titleStr = "修改" + titleStr;
            }
            // 跳出弹出层表单
            layui.use('layer', function () {
                // 实例化一个弹出层对象
                let layer = layui.layer;
                // 打开弹出层
                layer.open({
                    type: 1,
                    title: titleStr, //添加表单的标题栏
                    btn: ['确定', '取消'],
                    area: ['40%', '60%'],
                    content: $('#layerContent'),
                    success: function (index, layero) {
                        //  弹出层加载完毕后，自动执行的函数---一般用户数据的填充！
                        if (Operation === 2) {
                            $('#url_id').val(value.id);
                            $('#province').val(value.province);
                            $('#city').val(value.city);
                            $('#area').val(value.area);
                            $('#url').val(value.url);
                        }
                    },
                    yes: function (index, layero) {
                        // =========== 点击提交 =============
                        let commitURL = "";
                        if (Operation === 1) {
                            // 添加的提交
                            commitURL = "{% url 'weather_add_city_url' %}";
                        } else if (Operation === 2) {
                            // 修改的提交
                            commitURL = "{% url 'weather_edit_city_url' %}";
                        }
                        // 开始提交
                        $.ajax({
                            url: commitURL,
                            method: 'post',
                            data: $('#layerForm').serialize(),
                            dataType: 'json',
                            success: function (res) {
                                //判断
                                if (res.status) {
                                    location.reload();
                                } else {
                                    alert(res.error);
                                }
                            }
                        })

                    },
                    btn2: function (index, layero) {
                        // 点击第二个按钮，本案例中和yes一样

                    },
                    end: function (index, layero) {
                        // 点击关闭后，弹出层消失后自动执行的动作
                        $('#province').val("");
                        $('#city').val("");
                        $('#area').val("");
                        $('#url').val("");
                    }
                });
            });
        }

        // =========== 添加的提交 ================
        function addCommitDB() {

            // 针对表单的校验  pass
            // 使用Ajax提交
            $.ajax({
                url: "{% url 'weather_add_city_url' %}",
                method: 'post',
                data: $('#layerForm').serialize(),
                dataType: 'json',
                success: function (res) {
                    //判断
                    if (res.status) {
                        location.reload();
                    } else {
                        alert(res.error);
                    }
                }
            })

        }

        // =========== 修改的提交 =================
        function editCommitDB() {

            // 针对表单的校验  pass
            // 使用Ajax提交
            $.ajax({
                url: "{% url 'weather_edit_city_url' %}",
                method: 'post',
                data: $('#layerForm').serialize(),
                dataType: 'json',
                success: function (res) {
                    //判断
                    if (res.status) {
                        location.reload();
                    } else {
                        alert(res.error);
                    }
                }
            })

        }

        // =========== 删除数据 ===============
        function delCommitDB(value) {
            // 弹出框提醒
            layui.use('layer', function () {
                let confirmStr = "您确定删除记录【" + value.province + "-" + value.city + "-" + value.area + '】记录吗？';
                //确认删除
                layer.confirm(confirmStr, {icon: 3, title: '提示'}, function (index) {
                    // ajax提交
                    $.ajax({
                        url: "{% url 'weather_del_city_url' %}",
                        method: 'post',
                        data: {
                            id: value.id,
                            csrfmiddlewaretoken: "{{ csrf_token }}"
                        },
                        dataType: 'json',
                        success: function (res) {
                            if (res.status) {
                                location.reload();
                            } else {
                                alert(res.error);
                            }
                        }
                    })
                })
            })
        }


    </script>

{% endblock %}

